<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        .container1 {
            height: 200px;
        }

        .container2 {
            height: 200px;
        }

        .container3 {
            height: 200px;
        }

        .container1 .box1 {
            background: red;
            display: block;
        }

        .container1 .box2 {
            background: skyblue;
            display: none;
        }

        .container1 .box3 {
            background: yellow;
            display: none;
        }

        .container2 .box1 {
            background: red;
            display: block;
        }

        .container2 .box2 {
            background: skyblue;
            display: none;
        }

        .container2 .box3 {
            background: yellow;
            display: none;
        }

        .container3 .box1 {
            background: red;
            display: block;
        }

        .container3 .box2 {
            background: skyblue;
            display: none;
        }

        .container3 .box3 {
            background: yellow;
            display: none;
        }
    </style>
</head>

<body>
    <div class="container1">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

    <div class="container2">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    <button class="next">点击我切换第二个选线卡下一页</button>

    <div class="container3">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

    <script>
        let btns = document.querySelectorAll(".container1 button");
        let divs = document.querySelectorAll(".container1 div");

        let btn2s = document.querySelectorAll(".container2 button");
        let div2s = document.querySelectorAll(".container2 div");

        let btn3s = document.querySelectorAll(".container3 button");
        let div3s = document.querySelectorAll(".container3 div");


        // 工厂模式
        //     function tab(btns, divs) {
        //         // 共性问题 
        //         btns.forEach((item, key) => {
        //             item.onclick = function () {
        //                 forDiv(key);
        //             }
        //         })

        //         function forDiv(key) {
        //             divs.forEach((div, k) => {
        //                 if (key === k) {
        //                     // 点击按钮的索引 ，把和按钮索引一样的div 显示出来
        //                     div.style.display = "block";
        //                 } else {
        //                     // 把和点击按钮不同的 div 隐藏起来
        //                     div.style.display = "none";
        //                 }
        //             })
        //         }

        //         let obj = {}; // 加原料
        //         obj.forDiv = forDiv;  // 加工原料

        //         return obj;  // 出厂 
        //     }

        //     // 多个选项卡 ，提高复用性， 函数封装 ；
        //     tab(btns, divs);

        //     let tab2 =  tab(btn2s, div2s);
        //     let nextBtn = document.querySelector(".next");
        //     let tabKey = 0;
        //     nextBtn.onclick = function(){
        //         tabKey++;
        //         if(tabKey>2){
        //             tabKey = 0;
        //         }
        //         tab2.forDiv(tabKey);
        //     }

        //    let tab3 =  tab(btn3s, div3s);

        //    let num = 0;
        //    setInterval(()=>{
        //         num++;
        //         if(num>2){
        //             num=0;
        //         }
        //         tab3.forDiv(num);
        //    },1000)



        // -----------------------------------------------------------------------------------
        // 构造函数方式
        function Tab(btns, divs) {
            this.btns = btns;  // 对象的属性
            this.divs = divs;
            let that = this;
            // 共性问题 
            this.btns.forEach((item, key) => {
                item.onclick = function () {
                    that.forDiv(key);
                }
            })
        }

        Tab.prototype.forDiv = function (key) {  // 对象的方法 
            this.divs.forEach((div, k) => {
                if (key === k) {
                    // 点击按钮的索引 ，把和按钮索引一样的div 显示出来
                    div.style.display = "block";
                } else {
                    // 把和点击按钮不同的 div 隐藏起来
                    div.style.display = "none";
                }
            })
        }

        // 多个选项卡 ，提高复用性， 函数封装 ；
        new Tab(btns, divs);

        let tab2 = new Tab(btn2s, div2s);
        let nextBtn = document.querySelector(".next");
        let tabKey = 0;
        nextBtn.onclick = function () {
            tabKey++;
            if (tabKey > 2) {
                tabKey = 0;
            }
            tab2.forDiv(tabKey);
        }

        let tab3 = new Tab(btn3s, div3s);
        let num = 0;
        setInterval(() => {
            num++;
            if (num > 2) {
                num = 0;
            }
            tab3.forDiv(num);
        }, 1000)
    </script>
</body>

</html>